import React, { useEffect, useState } from 'react'
import { Layout, Menu } from 'antd'
import { useNavigate } from 'react-router-dom'
import './index.css'
import axios from 'axios'
import {} from '@ant-design/icons'
import { useSelector } from 'react-redux'
import logoImage from '../../assets/logo192.png'

const { Sider } = Layout
const { SubMenu } = Menu

export default function SideMenu() {
  const collapsed = useSelector((state) => state.collapsed.value)

  const [menuList, setMenuList] = useState([])

  const renderMenu = (menuList) => {
    return menuList.map((item) => {
      if (
        item.children &&
        item.pagepermisson &&
        item.children.length > 0 &&
        rights.includes(item.key)
      ) {
        return (
          <SubMenu key={item.key} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        )
      }
      return (
        item.pagepermisson &&
        rights.includes(item.key) && (
          <Menu.Item key={item.key} onClick={NavigateTo}>
            {item.title}
          </Menu.Item>
        )
      )
    })
  }
  const [rights, getrights] = useState()
  useEffect(() => {
    getrights(JSON.parse(localStorage.getItem('token')).role.rights)
    axios.get('/rights?_embed=children').then((res) => {
      setMenuList(res.data)
    })
  }, [])
  //跳转
  const navigate = useNavigate()
  const NavigateTo = (e) => {
    navigate(e.key)
  }
  //样式
  return (
    <Sider trigger={null} collapsed={collapsed}>
      <div  className='logo'>
        <img src={logoImage} alt="" className='logoImage'/>
        <p  className={collapsed ? 'dispaly' : ''}>全球新闻发布管理系统</p>
      </div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['1']}
        onClick={NavigateTo}
      >
        {renderMenu(menuList)}
      </Menu>
    </Sider>
  )
}
